//获取相关节点
let minBox = document.getElementsByClassName("minBox")[0]; //小盒子
let min = document.getElementsByClassName("min")[0]; //跟随鼠标动的盒子
//let img = document.getElementsByTagName("img")[0]; //大图片
let maxBox = document.getElementsByClassName("maxBox")[0]; //大盒子 
let smallPic = document.getElementsByClassName("smallPic"); //下面小图片
let bigPic = document.getElementsByClassName("bigPic")[0]; //右上方图片


let arr = ["A", "B", "C"];
//鼠标移入下面小图，左上背景图改变,右上角大图改变
for (let i = 0; i < smallPic.length; i++) {
    smallPic[i].onmouseenter = function() {
        minBox.style.backgroundImage = `url(./images/images/img${arr[i]}_2.jpg)`;

        bigPic.src = `./images/images/img${arr[i]}_3.jpg`;
    }
}

//给minBox添加事件
//1.鼠标移入小盒子，大盒子出现、跟随鼠标动的盒子出现
minBox.onmouseenter = function() {
        //跟随鼠标动的盒子出现
        min.style.display = "block";
        //大盒子出现
        maxBox.style.display = "inline-block";
    }
    //2.鼠标移出小盒子，大盒子消失、跟随鼠标动的盒子消失
minBox.onmouseleave = function() {
    //跟随鼠标动的盒子消失
    min.style.display = "none";
    //大盒子消失
    maxBox.style.display = "none";
}

//3.鼠标移动事件,遮罩层跟随鼠标移动
minBox.onmousemove = function() {
    //console.log(event.target);
    min.style.left = event.clientX - minBox.offsetLeft - min.offsetWidth / 2 + "px";
    min.style.top = event.clientY - minBox.offsetTop - min.offsetHeight / 2 + "px";


    //判断left值和top值是否超出可视小盒子

    //左右
    if (parseInt(min.style.left) < 0) {
        min.style.left = 0 + "px";
    } else if (parseInt(min.style.left) > minBox.offsetWidth - min.offsetWidth) {
        min.style.left = minBox.offsetWidth - min.offsetWidth + "px";
    }


    //上下
    if (parseInt(min.style.top) < 0) {
        min.style.top = 0 + "px";
    } else if (parseInt(min.style.top) > minBox.offsetHeight - min.offsetHeight) {
        min.style.top = minBox.offsetHeight - min.offsetHeight + "px";
    }


    //大盒子里面的图片跟随移动
    bigPic.style.left = -parseInt(min.style.left) * (maxBox.offsetWidth / minBox.offsetWidth) + "px";
    bigPic.style.top = -parseInt(min.style.top) * (maxBox.offsetHeight / minBox.offsetHeight) + "px";

}